<template>
  <div>
    <div>
      <search-form
        class="searchTop border-shadow"
        :formModel="searchForm"
        :formList="roleFormList"
      >
        <slot name="form-slot">
          <el-button
            type="primary"
            :size="btn_size"
            icon="el-icon-search"
            :id="tableParams.btnId"
          >搜索</el-button>
          <el-button
            type="primary"
            :size="btn_size"
            icon="el-icon-refresh"
          >重置</el-button>
        </slot>
      </search-form>
      <div class="table-btn">
        <el-button
          type="primary"
          :size="btn_size"
          icon="el-icon-plus"
          @click="handleClose"
        >新增</el-button>
      </div>
      <basic-table
        :tableParams="tableParams"
        :getListApi="getListApi"
        :searchForm="searchForm"
        :hasNum="false"
      >
        <span
          slot="status"
          slot-scope="scope"
        >
          <span class="dot green"></span><span class="statusText">正常</span>
        </span>
        <span
          slot="table-button"
          slot-scope="scope"
        >
          <el-button
            v-for="(j, idx) in tableParams.tableOption.btnList"
            :key="idx"
            :type="j.type"
            size="mini"
            plain
            @click="btnClick(j.pType, scope.scope)"
          >{{j.name}}</el-button>
        </span>
      </basic-table>
      <basic-dialog
        :title="roleDialogTitle"
        :isVisible="roleVisible"
        @confirmDialog="handleConfirm"
        @closeDialog="handleClose"
      >
        <slot>
          <rule-form
            :ruleForm="roleName"
            :rules="roleRules"
            :ruleData="roleData"
            ref='roleName'
          >
            <slot
              name="form-slot"
              slot-scope="scope"
            >
              <el-tree
                :data="data"
                show-checkbox
                default-expand-all
                node-key="id"
                ref="tree"
                highlight-current
              >
              </el-tree>
            </slot>
          </rule-form>
        </slot>
      </basic-dialog>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchForm: {},
      roleFormList: [
        {
          type: 'input',
          inputType: 'text',
          prop: 'roleName',
          placeholder: '请输入角色名称'
        }
      ],
      tableParams: {
        mutiSelectName: 'role',
        mutiSelectUniqueKey: 'id',
        btnId: new Date().getTime() + parseInt(Math.random() * 1000),
        listName: 'list',
        tableColumns: [
          {
            label: '角色名称',
            prop: 'roleName'
          }, {
            label: '创建时间',
            prop: 'createDate'
          }, {
            label: '备注',
            prop: 'remark'
          }
        ],
        tableOption: {
          btnList: [
            {
              type: 'primary',
              name: '新增',
              pType: 'create'
            },
            {
              type: 'primary',
              name: '编辑',
              pType: 'edit'
            },
            {
              type: 'danger',
              name: '删除',
              pType: 'delete'
            }
          ]
        }
      },
      getListApi: null,
      // 弹窗数据
      roleDialogTitle: '新增用户',
      roleVisible: false,
      roleName: {
        account: '胡悦',
        departmentId: '',
        superiorId: '',
        enableStatus: true
      },
      roleData: [
        { label: '角色名称', prop: 'roleName', type: 'input' },
        { label: '备注', prop: 'remark', type: 'input' },
        { label: '状态：', prop: 'enableStatus', type: 'switch' },
        { label: '数据权限', prop: 'superiorId', type: 'radio', children: [{ id: 1, label: '本人' }, { id: 2, label: '本人及下属' }, { id: 3, label: '本部门' }, { id: 4, label: '本部门&下属' }, { id: 5, label: '全部' }] },
        { label: '菜单权限', prop: 'rolename', type: 'customize' }
      ],
      roleRules: {
        roleName: [{ required: true, message: '请输入角色名称', trigger: blur }]
      },
      data: [{
        id: 1,
        label: '一级 1',
        children: [{
          id: 4,
          label: '二级 1-1',
          children: [{
            id: 9,
            label: '三级 1-1-1'
          }, {
            id: 10,
            label: '三级 1-1-2'
          }]
        }]
      }, {
        id: 2,
        label: '一级 2',
        children: [{
          id: 5,
          label: '二级 2-1'
        }, {
          id: 6,
          label: '二级 2-2'
        }]
      }, {
        id: 3,
        label: '一级 3',
        children: [{
          id: 7,
          label: '二级 3-1'
        }, {
          id: 8,
          label: '二级 3-2'
        }]
      }]
    }
  },
  methods: {
    // 确定
    handleConfirm() {
      console.log(this.$refs.roleForm)
      this.$refs.roleForm.$children[0].validate((valid) => {
        if (valid) {
          this.handleClose()
        } else {
          console.log('error')
        }
      })
    },
    // 取消
    handleClose() {
      if (!this.roleVisible && this.$refs.roleForm) {
        this.$refs.roleForm.$children[0].resetFields()
      }
      this.roleVisible = !this.roleVisible
    },
    // 按钮事件
    btnClick(pType, scope) {
      console.log(pType, scope)
      switch (pType) {
        case 'create':
          this.editEvent()
          break
        case 'edit':
          this.editEvent(scope)
          break
        case 'delete':
          this.deleteEvent(scope.id)
          break
      }
    },
    // 编辑触发事件
    editEvent(row) {
      this.handleClose()
    },
    // 删除触发事件
    deleteEvent(id) {
      const that = this
      const tipData = {
        that: that,
        tipText: '是否删除当前记录',
        tipTitle: '提示',
        type: 'error',
        callBack: () => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        }
      }
      this.$Common.confirmDialog(tipData)
    }
  }
}
</script>